<template>
	<view>
		<searchHeader @input="searchInput" @confirm='searchConfirm' :value='value' @back='back'/>
		<view class="mayInterested" v-if="!inInput&&type=='artIndex'">
			<view class="mayInterested_title">
				<text>你可能感兴趣的</text>
				<view @tap="getInterest">
					<text>换一换</text>
					<image src="/static/svg/The refresh.svg" mode=""></image>
				</view>
			</view>
			<view class="mayInterested_body">
				<text v-for="(item,index) in interestedList" @tap="toSearch" :data-value='item'>{{item}}</text>
			</view>
		</view>
		<view class="history" v-if="historyList.length>0&&!inInput">
			<view class="history_title">
				<text>历史记录</text>
				<image src="/static/svg/delete.svg" mode="" @tap="toDeleHistory"></image>
			</view>
			<view class="mayInterested_body">
				<text v-for="(item,index) in historyList" @tap="toSearch" :data-value='item'>{{item}}</text>
			</view>
		</view>
		<view class="searchTips" v-if="inInput">
			<rich-text class="searchTip" :nodes='item.html' v-for="(item,index) in tipList" :key='index' @tap="toSearch" data-type='tip' :data-state='item.state'  :data-id='item.id' :data-value='item.value'></rich-text>
		</view>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import searchHeader from "@/components/header/searchHeader.vue"
	export default {
		components: {searchHeader},
		data() {
			return {
				type:"",
				interestedList:[],
				historyList:[],
				inInput:false,
				value:"",
				state:"",
				tipList:[]
			};
		},
		onLoad(e) {
			this.state=e.state
			this.type=e.type
			if(this.type=='artIndex'){
				this.getInterest()
			}
		},
		onShow(){
			this.getHistory()
		},
		methods: {
			async getInterest(){
				let res=await urls.another()
				this.interestedList=[]
				try{
					for(let a=0;a<res.data.length;a++){
						this.interestedList.push(res.data[a].content)
					}
				}catch(e){
					
				}
			},
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			getHistory(){
				if(this.type!=""){
					try{
						this.historyList=localStorage.getItem(this.type+"searchHistory")?JSON.parse(localStorage.getItem(this.type+"searchHistory")):[]
					}catch(e){
						this.historyList=[]
					}
				}else{
					this.historyList=[]
				}
			},
			toDeleHistory(){
				uni.showModal({
					content: '确定要清空历史记录吗？',
					success: res=> {
					    if (res.confirm) {
							localStorage.removeItem(this.type+"searchHistory")
							this.historyList=[]
					    } else if (res.cancel) {
					        
					    }
					}
				})
			},
			async getTips(value){
				let res=await urls.searchTitle({keyWord:value})
				let tipList=[]
				for(let a=0;a<res.data.length;a++){
					tipList.push({
						value:res.data[a].title.replace(/<em>/g,"").replace(/<\/em>/g,""),
						html:res.data[a].title.replace(/<em>/g,"<span style='color:#333333'>").replace(/<\/em>/g,"</span>"),
						id:res.data[a].id,
						state:res.data[a].state
					})
				}
				this.tipList=tipList
			},
			searchInput(value){
				this.getTips(value)
				if(value){
					this.inInput=true
				}else{
					this.inInput=false
				}
			},
			searchConfirm(value){
				let historyList=localStorage.getItem(this.type+"searchHistory")?JSON.parse(localStorage.getItem(this.type+"searchHistory")):[]
				for(let a=0;a<historyList.length;a++){
					if(historyList[a]==value){
						historyList.splice(a,1)
						break
					}
				}
				historyList.unshift(value)
				localStorage.setItem((this.type+"searchHistory"),JSON.stringify(historyList))
				uni.redirectTo({
					url: '/pages/search/searchResult?type='+this.type+'&value='+value+"&state="+this.state
				})
			},
			toSearch(e){
				this.searchConfirm(e.currentTarget.dataset.value)
				if(e.currentTarget.dataset.type=='tip'){
					urls.userCount({
						id:e.currentTarget.dataset.id,
						state:e.currentTarget.dataset.state
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
.mayInterested{
	width: 720rpx;
	margin-left: 30rpx;
	margin-top: 30rpx;
	.mayInterested_title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 12rpx;
		padding-right: 30rpx;
		text{
			font-size: 30rpx;
			color: #999999;
			display: inline-block;
			line-height: 30rpx;
		}
		view{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			image{
				height: 44rpx;
				width: 44rpx;
				margin-left: 19rpx;
			}
		}
	}
}
.mayInterested_body{
	display: flex;
	flex-wrap: wrap;
	text{
		display: block;
		height: 60rpx;
		padding: 0 30rpx;
		background-color: #F7F7F7;
		border-radius: 26rpx;
		margin: 30rpx 30rpx  0 0;
		font-size: 28rpx;
		color: #666666;
		letter-spacing: 1rpx;
		line-height: 60rpx;
	}
}
.history{
	margin-top: 88rpx;
	.history_title{
		padding: 0 30rpx 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text{
			font-size: 30rpx;
			letter-spacing: 1rpx;
			color: #999999;
			line-height: 30rpx;
		}
		image{
			height: 44rpx;
			width: 44rpx;
		}
	}
	.mayInterested_body{
		padding-left: 30rpx;
	}
}
.searchTips{
	padding: 0 30rpx;
	.searchTip{
		height: 90rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color:#999999;
		letter-spacing: 1rpx;
	}
}
</style>
